<template>
  <view>
    <loading v-if="0 != loading" :status="loading" />
    <view v-else class="body">
      <!-- <loadingswing v-if="loadingswingShow" /> -->
      <!-- 搜索 -->
      <view class="head-search">
        <view class="search-box">
          <view class="op-box" @tap.stop.prevent="doSearch">
            <icon type="search" size="36rpx" />
          </view>
          <input
            class="search-input-local"
            placeholder="请输入商品名称"
            :disabled="true"
            @tap.stop.prevent="doSearch"
          />
        </view>
      </view>

      <!-- 顶部分类栏 -->
      <view class="list-view">
        <view class="head-sort">
          <view
            class="sort-condition-item sort-condition-box"
            @tap.stop.prevent="changeSort"
            data-sort-sidx="1"
          >
            <text>价格</text>
            <view class="sort-order">
              <text
                class="iconfont icon-right up-icon"
                :style="
                  'color:' +
                  (sortSidx == 1 && sortOrder == 1
                    ? platformConfig.baseColor
                    : '#888')
                "
              />
              <text
                class="iconfont icon-right1 up-down"
                :style="
                  'color:' +
                  (sortSidx == 1 && sortOrder == 0
                    ? platformConfig.baseColor
                    : '#888')
                "
              />
            </view>
          </view>
          <view
            class="sort-condition-item sort-condition-box"
            @tap.stop.prevent="changeSort"
            data-sort-sidx="2"
          >
            <text>销量</text>
            <view class="sort-order">
              <text
                class="iconfont icon-right up-icon"
                :style="
                  'color:' +
                  (sortSidx == 2 && sortOrder == 1
                    ? platformConfig.baseColor
                    : '#888')
                "
              />
              <text
                class="iconfont icon-right1 up-down"
                :style="
                  'color:' +
                  (sortSidx == 2 && sortOrder == 0
                    ? platformConfig.baseColor
                    : '#888')
                "
              />
            </view>
          </view>
        </view>
        <view class="container-type4 superclass-and-subclass">
          <!-- 左侧分类1 -->
          <view class="superclass-content">
            <scroll-view
              class="classify-list"
              :scroll-with-animation="true"
              scroll-y
              :scroll-top="leftMenuTop"
            >
              <block v-for="(item, index) in classifyParentList" :key="item.id">
                <view
                  class="classify-item"
                  :style="
                    item.id == activeClassifyParentId
                      ? 'color:' + platformConfig.baseColor
                      : ''
                  "
                  @tap="changeType"
                  :data-index="index"
                  :data-item="item"
                >
                  <text
                    class="classify-item-text"
                    :style="
                      activeClassifyParentId == item.id
                        ? 'border-left:6rpx solid ' +
                          platformConfig.baseColor +
                          ';font-size: 32rpx;font-weight: 600;'
                        : 'border-left:6rpx solid #f7f7f7;'
                    "
                    :data-classifyname="item.classifyName"
                  >
                    {{ item.classifyName }}
                  </text>
                </view>
                <block v-if="item.id == activeClassifyParentId">
                  <view
                    v-for="(item2, index2) in activeClassifyChildList"
                    :key="item2.id"
                    class="classify-item"
                    :data-item="item2"
                    @tap="addActive"
                    :style="
                      'background-color:' +
                      (scrollClassifyId == item2.id ? '#ffffff' : '#f7f7f7') +
                      ';color:' +
                      (scrollClassifyId == item2.id
                        ? platformConfig.baseColor
                        : '#8C8C8C')
                    "
                  >
                    <text
                      class="classify-item-text classify-item-text2"
                      :data-classifyname="item2.classifyName"
                    >
                      {{ item2.classifyName }}
                    </text>
                  </view>
                </block>
              </block>
            </scroll-view>
          </view>
          <!-- /左侧分类 -->
          <!-- 右侧商品 -->
          <scroll-view
            class="subclass-content"
            @scrolltolower="loadMore"
            :scroll-y="true"
          >
            <view
              class="classify-content"
              style="min-height: calc(100% - 100rpx)"
            >
              <!-- 商品 -->
              <view class="goods-list-2">
                <navigator
                  class="goods-item-2"
                  :url="
                    '/subPackages/mall/pages/goods/goods?goodsId=' + item.id
                  "
                  v-if="skeletonShow"
                  v-for="(item, index) in goodsListForShow"
                  :key="item.id"
                >
                  <u-skeleton
                    avatar
                    avatar-shape="square"
                    avatar-size="164rpx"
                    :loading="skeletonShow"
                  >
                  </u-skeleton>

                  <view class="goods-info">
                    <u-skeleton
                      :loading="skeletonShow"
                      title
                      row="2"
                      row-width="310rpx"
                    >
                    </u-skeleton>
                  </view>
                </navigator>
                <block v-if="goodsList.length > 0">
                  <navigator
                    class="goods-item-2"
                    @click="linkTrack"
                    :data-item="item"
                    :url="
                      item.needPointsMin || item.needPointsMax
                        ? '/subPackages/pointMallPkg/pages/pointToGoodsDetail/pointToGoodsDetail?exchangeId=' +
                          item.exchangeId
                        : '/subPackages/mall/pages/goods/goods?goodsId=' +
                          item.id
                    "
                    v-if="!skeletonShow"
                    v-for="(item, index) in goodsList"
                    :key="item.id"
                  >
                    <u-skeleton
                      avatar
                      avatar-shape="square"
                      avatar-size="164rpx"
                      :loading="skeletonShow"
                    >
                      <view style="position: relative">
                        <image
                          class="goods-img-2"
                          :src="baseUrl + '/' + item.img"
                          :lazy-load="true"
                        ></image>
                        <view
                          v-if="item.rest == 0 || util.isEmpty(item.rest)"
                          class="empty-2"
                        >
                          <image
                            class="empty-img-2"
                            src="/static/image/empty.png"
                          ></image>
                        </view>
                      </view>
                    </u-skeleton>

                    <u-skeleton
                      :loading="skeletonShow"
                      title
                      row="2"
                      row-width="330rpx"
                    >
                      <view class="goods-info">
                        <text class="goods-name-2">{{ item.name }}</text>
                        <view>
                          <text
                            v-if="item.hasDisPrice"
                            class="tag"
                            :style="
                              'color:' +
                              platformConfig.baseColor +
                              ';border:1px solid ' +
                              platformConfig.baseColor
                            "
                          >
                            限时折扣
                          </text>
                        </view>
                        <block v-if="item.hasDisPrice">
                          <view class="info-bottom">
                            <view
                              class="price-item"
                              v-if="item.needPointsMin || item.needPointsMax"
                              :style="'color:' + platformConfig.baseColor + ';'"
                            >
                              <text
                                class="goods-price-2"
                                v-if="item.needPointsMax == item.needPointsMin"
                                >{{ item.needPointsMax
                                }}<text class="pointText"> 积分11</text></text
                              >
                              <text class="goods-price-2" v-else
                                >{{
                                  `${item.needPointsMin} ~ ${item.needPointsMax}`
                                }}<text class="pointText"> 积分</text></text
                              >
                            </view>
                            <view class="price-item" v-else>
                              <text
                                class="goods-price-2"
                                :style="
                                  'color:' + platformConfig.baseColor + ';'
                                "
                                >￥{{ item.disPrice }}</text
                              >
                              <text
                                v-if="!util.isEqual(item.oldPrice, item.price)"
                                class="goods-oldPrice-2"
                                >￥{{ item.price }}</text
                              >
                            </view>
                            <text
                              v-if="item.rest > 0"
                              @tap.stop.prevent="addGoods"
                              :data-discountid="item.discountId"
                              :data-goodsid="item.id"
                              :data-hasdisprice="item.hasDisPrice"
                              class="iconfont icon-ysgouwuche2"
                              :style="'color: ' + platformConfig.baseColor"
                            ></text>
                          </view>
                        </block>
                        <block v-else>
                          <view class="info-bottom">
                            <view
                              class="price-item"
                              v-if="item.needPointsMin || item.needPointsMax"
                              :style="'color:' + platformConfig.baseColor + ';'"
                            >
                              <text
                                class="goods-price-2"
                                v-if="item.needPointsMax == item.needPointsMin"
                                >{{ item.needPointsMax
                                }}<text class="pointText"> 积分</text></text
                              >
                              <text class="goods-price-2" v-else
                                >{{
                                  `${item.needPointsMin} ~ ${item.needPointsMax}`
                                }}<text class="pointText"> 积分</text></text
                              >
                              <text
                                class="goods-price-2"
                                v-if="item.exchangeType == '2'"
                                >+ ¥{{ item.needMoney }}</text
                              >
                            </view>
                            <view class="price-item" v-else>
                              <text
                                class="goods-price-2"
                                :style="
                                  'color:' + platformConfig.baseColor + ';'
                                "
                                >￥{{ item.price }}</text
                              >
                              <text
                                v-if="!util.isEqual(item.oldPrice, item.price)"
                                class="goods-oldPrice-2"
                                >￥{{ item.oldPrice }}</text
                              >
                            </view>
                            <!-- <text
                              v-if="item.rest > 0 && !item.exchangeId"
                              @tap.stop.prevent="addGoods"
                              :data-goodsid="item.id"
                              class="iconfont icon-addition_fill"
                              :style="'color: ' + platformConfig.baseColor"
                            ></text> -->
                            <text
                              v-if="1"
                              @tap.stop.prevent="addGoods"
                              :data-goodsid="item.id"
                              class="iconfont icon-addition_fill"
                              :style="'color: ' + platformConfig.baseColor"
                            ></text>
                          </view>
                        </block>
                      </view>
                    </u-skeleton>
                  </navigator>
                </block>
                <block v-else>
                  <view class="basic-produce-box-2">
                    <image src="/static/image/home_ic_empty@2x.png"></image>
                    <view class="tips">商品上架中</view>
                  </view>
                </block>
              </view>
              <!-- /商品 -->
            </view>
          </scroll-view>
          <!-- /右侧商品 -->
        </view>
      </view>
    </view>

    <!-- 弹框阴影背景 -->
    <view
      class="shadow-bg"
      v-if="specInfoShow"
      @touchmove.stop.prevent="preventTouchMove"
    >
      <view style="flex-grow: 1" @tap.stop.prevent="closeSpecInfo"></view>
      <!-- 商品规格信息 -->
      <view
        :class="'spec-info ' + (specInfoShow ? 'slideUp' : '')"
        v-if="specInfoShow"
      >
        <view class="spec-header">
          <view class="spec-line"></view>
        </view>
        <scroll-view style="width: 100%; height: 800rpx" scroll-y>
          <!-- 商品信息 -->
          <view class="spec-goods">
            <image
              class="spec-goods-img"
              :src="
                baseUrl +
                '/' +
                (goodsDetailInfo != null &&
                !util.isEmpty(goodsDetailInfo.skuImage)
                  ? goodsDetailInfo.skuImage
                  : goodsInfo.images)
              "
            >
            </image>
            <view class="spec-goods-info">
              <block v-if="hasDisPrice">
                <view
                  class="spec-goods-price"
                  :style="'color:' + platformConfig.baseColor + ';'"
                >
                  <block name="money">
                    <view
                      style="
                        display: flex;
                        align-items: baseline;
                        line-height: 1;
                      "
                      class="num"
                    >
                      <text :style="'font-size:' + 30 * 0.7 + 'rpx;'">¥</text>
                      <text :style="'font-size:' + 30 + 'rpx;'">{{
                        util.integerMoney(
                          goodsDetailInfo != null
                            ? goodsDetailInfo.price
                            : discountGoodsInfo.salePrice
                        )
                      }}</text>
                      <text :style="'font-size:' + 30 * 0.7 + 'rpx;'">{{
                        util.decimalMoney(
                          goodsDetailInfo != null
                            ? goodsDetailInfo.price
                            : discountGoodsInfo.salePrice
                        )
                      }}</text>
                    </view>
                  </block>
                </view>
              </block>
              <block v-else>
                <view
                  class="spec-goods-price"
                  :style="'color:' + platformConfig.baseColor + ';'"
                >
                  <block name="money">
                    <view
                      style="
                        display: flex;
                        align-items: baseline;
                        line-height: 1;
                      "
                      class="num"
                    >
                      <text :style="'font-size:' + 30 * 0.7 + 'rpx;'">¥</text>
                      <text :style="'font-size:' + 30 + 'rpx;'">{{
                        util.integerMoney(
                          goodsDetailInfo != null
                            ? goodsDetailInfo.price
                            : goodsInfo.price
                        )
                      }}</text>
                      <text :style="'font-size:' + 30 * 0.7 + 'rpx;'">{{
                        util.decimalMoney(
                          goodsDetailInfo != null
                            ? goodsDetailInfo.price
                            : goodsInfo.price
                        )
                      }}</text>
                    </view>
                  </block>
                </view>
              </block>

              <text
                class="spec-vip-price"
                v-if="util.showVipPrice(goodsInfo.openVip, goodsInfo.vipprice)"
              >
                VIP ￥{{
                  goodsDetailInfo != null
                    ? goodsDetailInfo.vipprice
                    : goodsInfo.vipprice
                }}
              </text>
              <text class="spec-stock"
                >库存：{{
                  goodsDetailInfo != null
                    ? util.isZero(goodsDetailInfo.rest)
                    : goodsInfo.rest
                }}</text
              >
              <view style="line-height: 30rpx">
                <text v-if="!isAllSelected">请选择：</text>
                <text v-if="isAllSelected">已选择：</text>
                <text
                  style="margin-right: 20rpx"
                  v-for="(item, index) in selectText"
                  :key="index"
                  >{{ item.spec }} {{ item.name }}</text
                >
              </view>
            </view>
            <!-- /商品信息 -->
          </view>
          <!-- /商品规格信息 -->
          <!-- 规格选择 -->
          <view
            class="sepc-content"
            v-for="(specSku, index) in specSku"
            :key="index"
          >
            <text class="spec-content-title">{{ specSku.spec }}</text>

            <radio-group class="check-content" :data-index="index">
              <label
                :class="item.checked ? 'checkbox checked' : 'checkbox'"
                @tap="radio(specSku.spec, index1)"
                :style="
                  'background-color: ' +
                  (item.checked ? platformConfig.baseColor : '#F5F5F5')
                "
                v-for="(item, index1) in specSku.size"
                :key="item.name"
              >
                <checkbox :value="item.name" :checked="item.checked" />

                {{ item.name }}
              </label>
            </radio-group>
          </view>
          <!-- 数量选择 -->
          <view class="select-num">
            <text>购买数量：</text>
            <view class="num-stepper">
              <text
                :style="'opacity: ' + (num == 1 ? '0.7' : '1')"
                class="decodeadd"
                @tap.stop.prevent="minusGoodsNum"
                >-</text
              >
              <text class="num-text">{{ num }}</text>
              <text
                :style="'opacity: ' + (num == rest ? '0.7' : '1')"
                class="decodeadd"
                @tap.stop.prevent="addGoodsNum"
                >+</text
              >
            </view>
          </view>
        </scroll-view>

        <!-- 购买按钮 -->
        <view v-if="rest > 0" class="btns">
          <button
            :style="
              'width:100%;color: #fff;padding: 0 !important; background-color: ' +
              platformConfig.baseColor
            "
            @tap="addTrolley"
          >
            加入购物车
          </button>
        </view>
        <view v-else class="btns">
          <button
            :style="
              'width:100%;color: #fff;padding: 0 !important; background-color: ' +
              platformConfig.backgroundColor
            "
            @tap="closeSpecInfo"
          >
            非常抱歉，暂时无货
          </button>
        </view>
      </view>
    </view>
  </view>
</template>
<script module="util" lang="wxs" src="../../utils/util.wxs"></script>
<script>
import loading from "@/components/loading/loading";
const app = getApp();

var util = require("../../utils/util.js");
import { http } from "@/utils/commonRequest.js";

let menuToTop = [];
let windowHeight;
let timeoutId;
let leftItemHeight;
export default {
  components: {
    loading,
  },
  data() {
    return {
      scrollLeft: 0,
      loading: 1,

      //加载中
      refreshing: false,

      //刷新中
      baseSize: null,

      //item的单位大小(175rpx)
      baseUrl: app.globalData.baseurl,

      platformConfig: app.globalData.platformConfig,
      classifyParentList: [],

      //父类列表
      classifyParentIndex: {},

      //父类和数组索引对照表
      classifyChildList: [],

      //子类列表
      classifyChildIndex: {},

      //子类和数组索引对照表
      goodsList: [],

      //商品列表
      activeClassifyParentId: "",

      // 当前选中的大类
      activeClassifyChildList: [],

      // 顶部有一级分类时要显示的二级分类列表
      scrollClassifyId: "",

      //当前滚动到的分类
      classifyLength: 0,

      goodsClassifyAllLength: 0,

      //子类的数量
      rest: 0,

      //商品库存
      goodsId: "",

      //商品Id
      detailId: "",

      //商品规格id
      num: 1,

      //商品购买数量
      specInfoShow: false,

      //是否显示规格,
      specSku: [],

      //规格数组
      specSelect: false,

      //规格是否选中
      selectSpecSku: [],

      //已选择的规格数组
      selectText: [],

      //选择的规格文本
      isAllSelected: 0,

      //规格是否选择完毕
      hasDisPrice: false,

      //是否有折扣价,
      currentPage: 1,

      isLoading: false,

      //防止用户不停刷新
      haveMore: true,

      //是否还有更多数据加载
      skeletonShow: true,

      loadingswingShow: true,
      goodsListForShow: [{}, {}, {}, {}, {}, {}, {}],
      trolleyNum: 0,
      activeParentId: "",
      scrollIntoViewId: "",
      leftMenuTop: 0,

      goodsDetailInfo: {
        skuImage: "",
        vipprice: "",
      },

      goodsInfo: {
        images: "",
        vipprice: "",
        rest: "",
      },

      goodsSkuDetailList: "",
      discountGoodsInfo: "",

      classifyParentItem: {
        id: "",
        classifyName: "",
      },
      storeId: "",
      sortSidx: null, //排序条件,1价格，2销量
      sortOrder: null, //排序顺序，1升序，0降序
    };
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //分类scrollview总高度
    windowHeight =
      app.globalData.sysInfo.windowHeight -
      Math.floor((100 * app.globalData.sysInfo.windowWidth) / 750); //左侧分类item高度

    leftItemHeight = Math.floor(
      (110 * app.globalData.sysInfo.windowWidth) / 750
    );
    console.log(windowHeight);
    console.log(leftItemHeight);
    if (options.storeId) {
      this.storeId = options.storeId;
    }
    this.activeParentId = options.id;

    this.platformConfig = app.globalData.platformConfig;
    this.activeClassifyParentId = this.activeParentId;
    this.scrollLeft = this.scrollLeft;
    // this.loadData();
    this.$zhuge.track("进入分类页面");
    console.log("onShow, platformConfig=", this.platformConfig);
  },
  onShow: function () {
    this.$checkLogin().then((res) => {
      // this.getTrolleyNum();
      this.loadData();
    });
  },
  /**
   * 下拉刷新
   */
  onPullDownRefresh: function () {
    this.loadData();
    uni.stopPullDownRefresh();
  },
  methods: {
    loadData: function () {
      if (this.refreshing) {
        console.log("so fast");
        return;
      }

      this.refreshing = true;
      this.getClassifyParent();
    },

    linkTrack: function (e) {
      let item = e.currentTarget.dataset.item;
      const obj = {
        当前页面: "商品分类页面",
        商品名称: item.name,
      };
      if (item.hasDisPrice) {
        obj["商品金额"] = item.disPrice;
      } else {
        if (item.exchangeType == "1") {
          obj["商品积分"] = item.needPointsMin;
        } else if (item.exchangeType == "2") {
          obj["商品金额"] = `${item.needPointsMin}积分 + ¥${item.needMoney}`;
        } else {
          obj["商品金额"] = item.price;
        }
      }
      this.$zhuge.track("点击商品", { ...obj });
    },

    changeSort: function (e) {
      var sortSidx = e.currentTarget.dataset.sortSidx;

      if (sortSidx == this.sortSidx) {
        if (this.sortOrder == 1) {
          this.sortOrder = 0;
        } else if (this.sortOrder == null) {
          this.sortOrder = 1;
        } else {
          this.sortOrder = null;
          this.sortSidx = null;
        }
      } else {
        this.sortSidx = sortSidx;
        this.sortOrder = 1;
      }

      this.skeletonShow = true;
      this.currentPage = 1;
      this.haveMore = true;
      this.loadMore();
    },

    // 获取一级分类列表
    getFirstClassify: function () {},

    //  获取二级分类列表
    getSecondClassify: function () {
      var that = this;
      http
        .get("shopGoodsInfo/getSecClassifyWithGoods", {})
        .then((res) => {
          res = res.data;
          if (200 == res.code) {
            console.log(res);
            let classifyChildList = res.list;
            classifyChildList.map((v) => {
              v.isActive = false;
            });
            classifyChildList[0].isActive = true;
            that.loading = 0;
            that.refreshing = false;
            that.classifyChildList = classifyChildList;
            that.scrollClassifyId = res.list[0].id;
            that.currentPage = 1;
            that.haveMore = true;
            that.loadMore();
          } else {
            console.log(res);
            that.refreshing = false;
            that.loading = -1;
          }
        })
        .catch((err) => {
          console.log(err);
          that.refreshing = false;
          that.loading = -1;
        });
    },

    // 分页加载
    loadMore: function () {
      console.log("loadMore");
      console.log(!this.haveMore || this.isLoading);
      var that = this;

      if (!this.haveMore || this.isLoading) {
        return;
      }

      that.isLoading = true;
      var params = {
        pageNum: that.currentPage,
        goodsClassifyId2: that.scrollClassifyId,
      };
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      if (this.storeId != "") {
        this.$checkLogin().then((res) => {
          params.storeId = that.storeId;
          http
            .get("/shopgoods/getGoodsByStoreId", {
              params: params,
            })
            .then((res) => {
              res = res.data;
              console.log(res);
              uni.hideLoading();
              setTimeout(function () {
                that.skeletonShow = false;
                that.loadingswingShow = false;
              }, 100);

              if (that.currentPage == 1) {
                that.goodsList = [];
              }

              if ("200" == res.code) {
                if (res.list.length > 0) {
                  that.goodsList = that.goodsList.concat(res.list);
                }

                if (res.finished) {
                  that.haveMore = false;
                }

                that.currentPage = that.currentPage + 1;
              }

              that.isLoading = false;
            })
            .catch((err) => {
              uni.hideLoading();
              that.skeletonShow = false;
              that.isLoading = false;
            });
        });
      } else {
        if (!util.isEmpty(this.sortSidx)) {
          params.sortSidx = this.sortSidx;
        }

        if (!util.isEmpty(this.sortOrder + "")) {
          params.sortOrder = this.sortOrder;
        }
        console.log("can参数==", params);
        this.$checkLogin().then((res) => {
          http
            .get("/shopGoodsInfo/getGoodsByPage", {
              params: params,
            })
            .then((res) => {
              res = res.data;
              console.log(res);
              uni.hideLoading();
              setTimeout(function () {
                that.skeletonShow = false;
                that.loadingswingShow = false;
              }, 100);

              if (that.currentPage == 1) {
                that.goodsList = [];
              }

              if ("200" == res.code) {
                if (res.list.length > 0) {
                  that.goodsList = that.goodsList.concat(res.list);
                }

                if (res.finished) {
                  that.haveMore = false;
                }

                that.currentPage = that.currentPage + 1;
              }

              that.isLoading = false;
            })
            .catch((err) => {
              uni.hideLoading();
              that.skeletonShow = false;
              that.isLoading = false;
            });
        });
      }
    },

    /**
     * 获取父类
     */
    getClassifyParent: function () {
      let url = "";
      let params = {};
      var that = this;
      if (this.storeId != "") {
        url = "/shopgoods/goodsClassifyParent2";
        params.storeId = this.storeId;
      } else {
        url = "shopgoodsclassify/goodsClassifyParent2";
      }
      http
        .get(url, { params: params })
        .then((res) => {
          res = res.data;
          if (200 == res.code) {
            var classifyParentList = res.list;
            console.log(classifyParentList);
            that.classifyParentList = classifyParentList;
            var classifyParentIndex = {};

            for (let i = 0, len = classifyParentList.length; i < len; i++) {
              classifyParentIndex[classifyParentList[i].id] = i;

              if (classifyParentList[i].id == that.activeParentId) {
                console.log(i, "命中的index");

                if (i > 2) {
                  that.scrollLeft = (i - 2) * 130 + "rpx";
                } else {
                  that.scrollLeft = 0;
                }
              }
            }

            that.scrollLeft = that.scrollLeft;
            that.classifyParentIndex = classifyParentIndex;
            console.log(classifyParentIndex);
            that.getClassifyChild();
          } else {
            console.log(res);
            that.refreshing = false;
            that.loading = -1;
          }
        })
        .catch((err) => {
          console.log(err);
          that.refreshing = false;
          that.loading = -1;
        });
    },

    /**
     * 获取子类
     */
    getClassifyChild: function () {
      var that = this;
      let url = "";
      let params = {};
      if (this.storeId != "") {
        url = "/shopgoods/goodsClassifyChild2";
        params.storeId = this.storeId;
      } else {
        url = "shopgoodsclassify/goodsClassifyChild2";
      }
      http
        .get(url, { params: params })
        .then((res) => {
          res = res.data;
          console.log(res);

          if (200 == res.code) {
            var classifyChildList = [];
            var classifyParentIndex = that.classifyParentIndex;
            var classifyChildListTmp = res.list;

            for (let i = 0, len = classifyChildListTmp.length; i < len; i++) {
              if (0 == classifyChildListTmp[i].parentId) {
                continue;
              }

              var parentIndex =
                classifyParentIndex[classifyChildListTmp[i].parentId];

              if (undefined == parentIndex) {
                //未查找到父类，脏数据
                continue;
              }

              var classifyChildArr = classifyChildList[parentIndex];

              if (undefined == classifyChildArr) {
                classifyChildArr = [];
                classifyChildList[parentIndex] = classifyChildArr;
              }

              classifyChildArr.push(classifyChildListTmp[i]);
            }

            if (1 == that.platformConfig.classifyCss) {
              var scrollClassifyId = that.scrollClassifyId;

              if (util.isEmpty(scrollClassifyId)) {
                for (let i = 0, len = classifyChildList.length; i < len; i++) {
                  if (classifyChildList[i] && classifyChildList[i].length > 0) {
                    scrollClassifyId = classifyChildList[i][0].parentId;
                    that.setMenuAnimation(i, classifyChildList.length);
                    break;
                  }
                }
              }

              that.classifyChildList = classifyChildList;
              that.scrollClassifyId = scrollClassifyId;
              that.loading = 0;
              setTimeout(function () {
                (that.skeletonShow = false), (that.loadingswingShow = false);
              }, 200);
              that.classifyParentList.forEach((item) => {
                // 添加节点的布局位置的查询请求
                uni
                  .createSelectorQuery()
                  .select("#id" + item.id)
                  .boundingClientRect((rect) => {
                    item.offsetTop = rect.top;
                    item.height = rect.height;
                  })
                  .exec();
              });
              that.refreshing = false;
            } else if (2 == that.platformConfig.classifyCss) {
              that.classifyChildList = classifyChildList;
              that.loading = 0;
              setTimeout(function () {
                that.skeletonShow = false;
                that.loadingswingShow = false;
              }, 200);
              that.refreshing = false;
            } else if (3 == that.platformConfig.classifyCss) {
              var activeClassifyParentId = that.activeClassifyParentId;
              var activeClassifyParentIndex = 0;

              if (
                !activeClassifyParentId ||
                that.classifyParentIndex[activeClassifyParentId] == undefined
              ) {
                that.activeClassifyParentId = that.classifyParentList[0]?.id;
              } else {
                activeClassifyParentIndex =
                  that.classifyParentIndex[activeClassifyParentId];
              }

              that.loading = 0;
              that.refreshing = false;
              that.classifyChildList = classifyChildList;
              that.activeClassifyChildList =
                classifyChildList[activeClassifyParentIndex];
              that.scrollClassifyId =
                classifyChildList[activeClassifyParentIndex] &&
                classifyChildList[activeClassifyParentIndex].length > 0
                  ? classifyChildList[activeClassifyParentIndex][0].id
                  : undefined;
              that.currentPage = 1;
              that.haveMore = true;
              that.loadMore();
            }
          } else {
            console.log(res);
            that.refreshing = false;
            that.loading = -1;
          }
        })
        .catch((err) => {
          console.log(err);
          that.refreshing = false;
          that.loading = -1;
        });
    },

    /**
     * 获取商品
     */
    getGoodsAll: function () {
      var classifyChildList = this.classifyChildList;
      var classifyChildListNew = [];

      for (let i = 0, len = classifyChildList.length; i < len; i++) {
        if (classifyChildList[i] && classifyChildList[i].length > 0) {
          classifyChildListNew = classifyChildListNew.concat(
            classifyChildList[i]
          );
        }
      }

      var classifyChildIndex = {};

      for (let i = 0, len = classifyChildListNew.length; i < len; i++) {
        classifyChildIndex[classifyChildListNew[i].id] = i;
      }

      this.classifyChildIndex = classifyChildIndex;
      var that = this;
      http
        .get("shopgoodsclassify/goodAllByClassify2", {})
        .then((res) => {
          res = res.data;
          if (200 == res.code) {
            console.log(res);
            var goodsList = [];
            var goodsListTmp = res.list;

            for (let i = 0, len = goodsListTmp.length; i < len; i++) {
              var classifyIndex =
                classifyChildIndex[goodsListTmp[i].goodsClassifyId2];

              if (undefined == classifyIndex) {
                //未查到所属类别，脏数据
                continue;
              }

              var goodsArr = goodsList[classifyIndex];

              if (undefined == goodsArr) {
                goodsArr = [];
                goodsList[classifyIndex] = goodsArr;
              } //如果商品已售罄

              if (
                goodsListTmp[i].rest == 0 ||
                util.isEmpty(goodsListTmp[i].rest)
              ) {
                goodsArr.push(goodsListTmp[i]);
              } else {
                goodsArr.unshift(goodsListTmp[i]);
              }
            }

            classifyChildListNew = classifyChildListNew.filter(
              (item, index) => {
                return (
                  undefined != goodsList[index] && null != goodsList[index]
                );
              }
            );
            goodsList = goodsList.filter((item) => {
              return undefined != item && null != item;
            });

            if (goodsList.length < 1) {
              return;
            }

            var scrollClassifyId = that.scrollClassifyId;

            if (util.isEmpty(scrollClassifyId)) {
              scrollClassifyId = goodsList[0][0].goodsClassifyId2;
            }

            goodsList = goodsList.concat(goodsList);
            that.classifyChildList = classifyChildListNew;
            that.goodsList = goodsList;
            that.scrollClassifyId = scrollClassifyId;
            that.classifyChildList.forEach((item) => {
              // 添加节点的布局位置的查询请求
              uni
                .createSelectorQuery()
                .select("#id" + item.id)
                .boundingClientRect((rect) => {
                  item.offsetTop = rect.top;
                  item.height = rect.height;
                })
                .exec();
            });
            that.refreshing = false;
          } else {
            console.log(res);
            that.refreshing = false;
            that.loading = -1;
          }
        })
        .catch((err) => {
          console.log(err);
          that.refreshing = false;
          that.loading = -1;
        });
    },

    /**
     * 点击一级分类
     */
    tabsChange(e) {
      if (e != this.tabsCurrent) {
        this.loadingShow = true;
        this.classId = this.sort.list[e].children[0].id;
        this.isBand = true;
        this.curr = 1;
        this.$store.commit("SORTPRODUCE_SET", []);
        this.getProduceList();
        this.tabsCurrent = app.globalData.curr = e;

        if (app.globalData.curr > 2) {
          this.scrollLeft = (app.globalData.curr - 2) * 130 + "rpx";
        } else {
          this.scrollLeft = 0;
        }

        this.tabsChildrenCurrent = 0;
        this.showBar = false;
      }
    },

    changeType: function (e) {
      let that = this;
      let classifyChildList = that.classifyChildList;
      let index = e.currentTarget.dataset.index;
      let item = e.currentTarget.dataset.item;
      this.$zhuge.track("分类页面-点击一级分类", {
        分类名称: item.classifyName,
      });
      if (index > 2) {
        that.scrollLeft = (index - 2) * 130 + "rpx";
      } else {
        that.scrollLeft = 0;
      }

      that.activeClassifyParentId = item.id;
      that.activeClassifyChildList = classifyChildList[index] || [];
      that.refreshing = false;
      that.scrollClassifyId =
        classifyChildList[index]?.length > 0
          ? classifyChildList[index][0].id
          : undefined;
      that.currentPage = 1;
      that.haveMore = true;
      that.scrollLeft = that.scrollLeft;
      that.loadMore();
    },

    /**
     * 点击分类进行切换
     */
    addActive: function (e) {
      var that = this;
      let item = e.currentTarget.dataset.item;
      this.$zhuge.track("分类页面-点击二级分类", {
        分类名称: item.classifyName,
      });
      if (that.platformConfig.classifyCss == "3") {
        that.skeletonShow = true;

        that.currentPage = 1;
        that.scrollClassifyId = item.id;
        that.haveMore = true;
        that.loadMore();
      } else {
        that.scrollIntoViewId = item.id;
        that.scrollClassifyId = item.id;
      }
    },

    // 监听右边商品列表滑动
    scrollClassifyList(e) {
      var that = this;
      var classifyCss = that.platformConfig.classifyCss;
      var data = [];

      if (classifyCss == 1) {
        data = that.classifyParentList;
      } // else if (classifyCss == 3) {
      //   data = that.data.classifyChildList;
      // }

      var temp = 0; //当data[i].offsetTop为负值时，说明是别的页面切换到分类页

      for (var i = 0; i < data.length; i++) {
        if (data[0].offsetTop < 0) {
          //50为右侧商品在初始位置时，距离顶部的距离
          temp = 50 - data[0].offsetTop;
        }

        data[i].offsetTop = temp + data[i].offsetTop;

        if (
          e.detail.scrollTop > data[i].offsetTop - 65 &&
          e.detail.scrollTop < data[i].offsetTop - 65 + data[i].height
        ) {
          that.scrollClassifyId = data[i].id;
          that.setMenuAnimation(i, data.length);
        }
      }
    },

    setMenuAnimation(i, len) {
      // 设置动画，使左侧列表滚动到指定位置。
      let self = this;
      var leftItemsHeight = i * leftItemHeight;
      var totalHeight = len * leftItemHeight;

      if (totalHeight <= windowHeight || leftItemsHeight < windowHeight / 2) {
        if (0 != this.leftMenuTop) {
          this.leftMenuTop = 0;
        }

        return;
      }

      var maxScroll = totalHeight - windowHeight;
      var leftMenuTop =
        leftItemsHeight - windowHeight / 2 > maxScroll
          ? maxScroll
          : leftItemsHeight - windowHeight / 2; // 节流操作

      if (timeoutId) {
        clearTimeout(timeoutId);
      }

      timeoutId = setTimeout(() => {
        console.log(leftMenuTop);
        self.leftMenuTop = leftMenuTop;
      }, 300);
    },

    //搜索
    doSearch: function () {
      this.$zhuge.track("分类页面-点击搜索栏");
      uni.navigateTo({
        url: "/subPackages/mall/pages/goodsList/goodsList",
      });
    },

    /**
     * 跳转到分类商品列表页面
     */
    gotoClassifyGoods: function (event) {
      var classifyId = event.currentTarget.dataset.subclassifyid;
      var classifyName = event.currentTarget.dataset.subclassifyname;
      uni.navigateTo({
        url:
          "/subPackages/mall/pages/goodsList/goodsList?classifyId=" +
          classifyId +
          "&classifyName=" +
          classifyName,
      });
    },

    /**
     * 点击添加图标触发方法
     */
    addGoods: function (e) {
      var that = this;
      var goodsId = e.currentTarget.dataset.goodsid;
      var hasDisPrice = e.currentTarget.dataset.hasdisprice;

      if (hasDisPrice != undefined) {
        that.hasDisPrice = hasDisPrice;
      }

      var discountId = e.currentTarget.dataset.discountid;
      that.loadGoodsInfo(goodsId, hasDisPrice, discountId);
    },

    /**
     * 展示选择规格
     */
    goSpecInfo: function (e) {
      var that = this;
      that.specInfoShow = true;
      // wx.hideTabBar({});
    },

    /**
     * 隐藏选择规格
     */
    closeSpecInfo: function (e) {
      var that = this;
      that.specInfoShow = false;
      // wx.showTabBar({});
    },

    /**
     * 查询商品详情获取商品规格
     */
    loadGoodsInfo: function (id, hasDisPrice, discountId) {
      var that = this;
      var goodsId = id;
      uni.showLoading({
        title: "加载中",
      });
      that.selectSpecSku = [];
      that.selectText = [];
      that.goodsDetailInfo = null;
      that.isAllSelected = 0;
      http
        .get("shopgoods/goodsInfo", {
          params: {
            id: goodsId,
          },
        })
        .then((res) => {
          res = res.data;
          if (200 == res.code) {
            if (false === res.goodsExist) {
              uni.redirectTo({
                url: "/pages/goodsFailed/goodsFailed",
              });
              return;
            }

            if ("goodsDown" === res.msg) {
              uni.showToast({
                title: "商品未上架",
              });
            } else {
              var tempInfo = JSON.parse(res.msg);
              var goodsSku = tempInfo.goodsSku;
              var specSku = [];
              var selectText = that.selectText;
              var rest =
                typeof tempInfo.rest == "undefined" ? 0 : tempInfo.rest;

              if (rest < 1) {
                return;
              }

              if (JSON.stringify(goodsSku) == "{}") {
                //如果规格数组为空，则根据goodsId查询detailId，直接将商品添加到购物车
                http
                  .get("/shopgoods/goodsDetailId", {
                    params: {
                      id: goodsId,
                    },
                  })
                  .then((res) => {
                    res = res.data;
                    if (200 == res.code) {
                      var detailId = res.detailId;
                      that.goodsId = goodsId;
                      that.detailId = res.detailId;
                      that.rest = 1;
                      that.isAllSelected = 1;
                      that.addTrolley();
                    }
                  });
              } else {
                //规格数组不为空，则将数组重组添加上checked,用来标记是否选中
                for (var item in goodsSku) {
                  var str = goodsSku[item];
                  var size = [];
                  for (var i = 0; i < str.length; ) {
                    size.push({
                      name: str[i],
                      checked: false,
                    });
                    i++;

                    if (i == str.length) {
                      specSku.push({
                        spec: item,
                        size: size,
                      });
                      selectText.push({
                        spec: item,
                        name: "",
                      });
                    }
                  }
                }

                that.goodsInfo = JSON.parse(res.msg);
                that.goodsId = goodsId;
                that.specSku = specSku;
                that.selectText = selectText;
                that.rest = rest;

                if (hasDisPrice) {
                  that.getDiscountGoodsDetailInfo(goodsId, discountId);
                }

                uni.hideLoading();
                that.goSpecInfo();
              }
            }
          } else {
            if (!res.goodsExist) {
              uni.redirectTo({
                url: "/pages/goodsFailed/goodsFailed",
              });
              return;
            }

            uni.hideLoading();
            that.loading = -1;
          }
        })
        .catch((err) => {
          uni.hideLoading();
          that.loading = -1;
        });
    },

    /**
     * 选中规格
     */
    radio: function (spec1, index1) {
      var that = this;
      var index = index1; //获取当前点击的下标

      var spec = spec1; //规格组名称,例：颜色、尺寸

      var specSku = that.specSku; //规格选项集合,例[{spec:颜色,size:[{name:红色,checked:false},{name:原谅色,checked:false}],{spec:尺寸,size:{name:大号,checked:false}}]

      var selectSpecSku = that.selectSpecSku; //已经选择了的规格的index数组，例：[0,0]表示选中：红色、大号，[1,0],表示选中：原谅色、大号

      var selectText = that.selectText;
      var isAllSelected = 0;
      var goodsSpec = []; //存放进行选择操作之后的规格选项集合，记录checked状态
      //每次选规格时将选择的购买数量重置

      that.num = 1;

      for (var i = 0; i < specSku.length; i++) {
        var checkboxArr = []; //遍历规格数组，当等于当前选择的规格组时，进入方法

        if (specSku[i].spec == spec) {
          checkboxArr = specSku[i].size; //选项集合，例：size:[{name:红色,checked:false},{name:原谅色,checked:false}]

          var tempCheck = checkboxArr[index].checked; //tempCheck为当前点击的规格选择状态
          //因为当个规格只能选择一项，先将所有所有选择状态置为false

          checkboxArr.forEach((item) => {
            item.checked = false;
          }); //将刚才点击的规格的选择状态取反，如果之前是选中，则变为取消选中

          checkboxArr[index].checked = !tempCheck;

          if (checkboxArr[index].checked) {
            //如果为选中状态，则记录该规格的index值
            selectSpecSku[i] = index;
            that.selectSpecSku = selectSpecSku;
            selectText[i].name = checkboxArr[index].name;
            console.log(selectText); //当记录已选择规格的数组长度等于 规格数组长度

            if (selectSpecSku.length == specSku.length) {
              //如果不包含标记值 *dex*，表示规格已经选择好了
              if (selectSpecSku.indexOf("*del*") < 0) {
                that.getGoodsDetail();
                that.isAllSelected = 1;
                console.log("规格选好了");
              }
            }
          } else {
            selectText[i].name = ""; //如果是取消选中，则插入标记值 *del*

            selectSpecSku[i] = "*del*"; //之前可能已经查询到了goodsDetailInfo和detailId，将其置为null

            that.selectSpecSku = selectSpecSku;
            that.goodsDetailInfo = null;
            that.rest = that.goodsInfo.rest;
            that.isAllSelected = 0;
            that.detailId = null;
          }
        } //checkboxArr.length == 0 表示没有进入上面的if判断，则specSku[i].size没有变，直接插入

        goodsSpec.push({
          spec: specSku[i].spec,
          size: checkboxArr.length == 0 ? specSku[i].size : checkboxArr,
        });
      }

      that.specSku = goodsSpec;
      that.selectText = selectText;
    },

    /**
     * 当规格数组不为空时，根据规格查询商品详情
     */
    getGoodsDetail: function (e) {
      var that = this;
      var selectSpecSku = that.selectSpecSku;
      var goodsId = that.goodsId;
      var arrPosition = ""; //拼接选中的规格index值，例：0-1，1-1

      selectSpecSku.forEach((item) => {
        arrPosition += item + "-";
      });
      arrPosition = arrPosition.substring(0, arrPosition.length - 1);
      var goodsSkuDetailList = that.goodsInfo.goodsSkuDetailList;
      var goodsDetailInfo = goodsSkuDetailList[arrPosition];
      var discountGoodsInfo = that.discountGoodsInfo;
      var rest = goodsDetailInfo.rest;

      if (
        rest == "" ||
        isNaN(rest) ||
        rest == "0" ||
        rest == "0.00" ||
        rest == undefined
      ) {
        rest = 0;
      }

      that.goodsDetailInfo = goodsDetailInfo;
      that.detailId = goodsDetailInfo.detailId;
      that.rest = rest;
    },

    /**
     * 调用增加购物车接口
     */
    addTrolley: function () {
      var that = this;
      var isAllSelected = that.isAllSelected;

      if (isAllSelected != 1) {
        uni.showToast({
          title: "请先选择规格",
          icon: "none",
        });
        return;
      }

      var id = that.goodsId;
      var detailId = that.detailId;
      var num = that.num;
      http
        .post(
          "shopTrolley/addTrolley",
          {
            id: id,
            detailId: detailId,
            num: num,
          },
          {
            header: {
              "content-type": "application/x-www-form-urlencoded",
            },
          }
        )
        .then((res) => {
          res = res.data;
          uni.hideLoading(); // wx.showTabBar({});

          if ("516" == res.code) {
            util.tips(res.msg);
            this.loading = 0;
          } else if ("200" == res.code) {
            if (res.msg == "SUCCESS") {
              uni.showToast({
                title: "成功添加购物车",
              });
              that.specInfoShow = false;
              that.getTrolleyNum(); // that.getTrolleyNum();
            } else if (res.msg == "NOSTOCK") {
              uni.showToast({
                title: "数量超过库存上限，请选择其他规格",
                icon: "none",
              });
            } else if (res.msg == "ERROR") {
              uni.showToast({
                title: "该商品库存为0，加入购物车失败",
                icon: "none",
              });
            } else if (res.msg == "NO_GOODS") {
              uni.showToast({
                title: "该商品规格已删除，无法加入购物车",
                icon: "none",
              });
            } else if (res.msg == "NOT_ENOUGH") {
              uni.showToast({
                title: "商品库存不足，已修改为库存值",
                icon: "none",
              });
            }
          } else {
            uni.hideLoading(); // wx.showTabBar({});
          }
        });
    },

    getTrolleyNum: function () {
      http
        .get("shopTrolley/trolleyNum", {})
        .then((res) => {
          res = res.data;
          if ("200" == res.code) {
            console.log("购物车添加数值");
            this.trolleyNum = Number(res.msg);
          }
        })
        .catch((err) => {
          console.log("购物车==err", err);
        });
    },

    /**
     * 增加选择商品数量
     */
    addGoodsNum: function (e) {
      var that = this;
      var isAllSelected = that.isAllSelected;

      if (!isAllSelected) {
        uni.showToast({
          title: "请先选择规格",
          icon: "none",
        });
        return;
      }

      if (that.checkRestZero(that.rest)) {
        return;
      }

      var goodsNum = this.num;

      if (goodsNum >= that.rest) {
        uni.showToast({
          title: "商品数量超过库存上限",
          icon: "none",
        });
      } else {
        this.num = ++goodsNum;
      }
    },

    /**
     * 减少选择商品数量
     */
    minusGoodsNum: function (e) {
      var that = this;
      var isAllSelected = that.isAllSelected;

      if (!isAllSelected) {
        uni.showToast({
          title: "请先选择规格",
          icon: "none",
        });
        return;
      }

      if (that.checkRestZero(that.rest)) {
        return;
      }

      var goodsNum = that.num;

      if (goodsNum > 1) {
        that.num = --goodsNum;
      }
    },

    /**
     * 检查商品库存是否为0
     */
    checkRestZero: function (rest) {
      if (rest <= 0) {
        uni.showToast({
          title: "抱歉，该商品库存为0，请选购其它商品",
          icon: "none",
          duration: 2000,
        });
        return true;
      }

      return false;
    },

    /**
     * 获取限时折扣商品活动详情
     */
    getDiscountGoodsDetailInfo: function (goodsId, discountId) {
      let that = this;
      http
        .get("discount/getDisGoodsInfo", {
          params: {
            goodsId: goodsId,
            discountId: discountId,
          },
        })
        .then((res) => {
          res = res.data;
          if (200 == res.code) {
            let discountGoodsInfo = res.discountGoods;
            let discount = res.discount;
            let goodsSkuDetailList = that.goodsInfo.goodsSkuDetailList;

            if (!util.isEmpty(goodsSkuDetailList)) {
              for (let item in goodsSkuDetailList) {
                var nowprice = 0;

                if ("0" === discountGoodsInfo.discountType) {
                  // nowprice = (goodsSkuDetailList[item].price * (parseFloat(discountGoodsInfo.discountValue).toFixed(2)) / 10).toFixed(2);
                  nowprice =
                    Math.round(
                      (100 *
                        goodsSkuDetailList[item].price *
                        discountGoodsInfo.discountValue) /
                        10
                    ) / 100;
                } else if ("1" === discountGoodsInfo.discountType) {
                  nowprice = (
                    goodsSkuDetailList[item].price -
                    parseFloat(discountGoodsInfo.reduceValue).toFixed(2)
                  ).toFixed(2);
                }

                goodsSkuDetailList[item].price = nowprice;
              }
            }

            that.goodsSkuDetailList = goodsSkuDetailList;
            that.discountGoodsInfo = discountGoodsInfo;
          }
        });
    },

    //阻止背景滚动
    preventTouchMove: function (e) {},
  },
};
</script>
<style>
/* @import '../../iconfont/iconfont.css'; */
/* pages/classify/classify.wxss */

page {
  width: 100%;
  height: 100%;
}

.body {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100vh;
  overflow: hidden;
  background-color: #fff;
  /* padding-bottom: 0rpx; */
}

.basic-produce-box-2 {
  width: 100%;
  height: 300rpx;
  margin-top: 100rpx;
}

.basic-produce-box-2 image {
  width: 100%;
  height: 100%;
}

.head-search {
  height: 110rpx;
  background-color: #fff;
  padding: 22rpx 32rpx 0;
  top: 0;
  left: 0;
  width: 750rpx;
  position: sticky;
  z-index: 100;
}

.search-box {
  height: 76rpx;
  border-radius: 60rpx;
  font-size: 26rpx;
  padding: 0 20rpx;
  background-color: #f7f7f7;
  flex-grow: 1;
  display: flex;
  align-items: center;
}

.op-box {
  padding: 0 10rpx;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.search-input-local {
  flex-grow: 1;
  padding: 0 10rpx;
}

.tips {
  width: 100%;
  text-align: center;
  font-size: 28rpx;
  color: #666666;
  margin-bottom: 218rpx;
}

/* 一级分类 */
.top-category {
  width: 750rpx;
  height: 98rpx;
  line-height: 98rpx;
  background-color: #fff;
  width: 100%;
  white-space: nowrap;
  font-size: 28rpx;
  font-weight: 400;
  color: #40434d;
  position: sticky;
  /* top: 100rpx; */
  left: 0rpx;
  z-index: 99;
}

.top-category-item {
  flex-shrink: 0;
  padding: 0 24rpx;
  position: relative;
  display: inline-block;
  background-color: #fff;
}

.current {
  color: #ff6464;
  font-size: 32rpx;
  font-weight: 600;
}

/* .current::after {
  position: absolute;
  content: ' ';
  width: 48rpx;
  height: 6rpx;
  bottom: -20rpx;
  left: 50%;
  transform: translateX(-50%);
  background: #FF5642;
  border-radius: 4rpx;
} */
.active-underline {
  position: absolute;
  width: 48rpx;
  height: 6rpx;
  bottom: -10rpx;
  left: 50%;
  transform: translateX(-50%);
  background: #ff5642;
  border-radius: 4rpx;
}

.superclass-and-subclass {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.superclass-content {
  width: 190rpx;
  height: 100%;
  flex-shrink: 0;
}

.classify-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  background: #f7f7f7;
}

/*隐藏滚动条*/

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

.classify-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 100%;
  height: 88rpx;
  font-size: 26px;
  /* padding: 20rpx 0; */
}

.classify-item-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 10rpx;
  width: 100%;
  height: 50rpx;
  line-height: 50rpx;
  font-size: 28rpx;
}

.classify-item-text2 {
  padding-left: 34rpx;
}

.active {
  background-color: #ff537b;
}

.subclass-content {
  overflow-y: scroll;
  position: relative;
  height: 100%;
  box-sizing: border-box;
  background-color: white;
  -webkit-overflow-scrolling: touch;
}

.classify-content {
  margin: 0 24rpx;
}

.classify-content:first-child {
  margin-top: 0 !important;
}

.classify-content:last-child {
  min-height: calc(100% - 40rpx);
}

/*隐藏滚动条*/

.subclass-content::-webkit-scrollbar {
  display: none;
}

.classifylogo-view {
  display: flex;
  width: 100%;
  height: 200rpx;
  background-color: white;
}

#classify-logo {
  width: 100%;
  height: 100%;
}

.classifyname-view {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90rpx;
  font-size: 26rpx;
  /* font-weight: bold; */
  color: #232626;
}

.line {
  width: 60rpx;
  height: 2rpx;
  background-color: #232626;
}

.title {
  margin: 0 26rpx;
}

.subclass-list {
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  /* padding-top: 42rpx; */
  /* padding-bottom: 100rpx; */
  width: 100%;
  /* max-height: 600rpx; */
  background-color: #fff;
}

.subclass-list::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

.subclass-item {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 10rpx;
  width: 33.3%;
  height: 240rpx;
  font-size: 28rpx;
}

.subclass-img {
  width: 140rpx;
  height: 140rpx;
}

.subclass-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  text-align: center;
  color: #333;
  font-size: 28rpx;
  height: 80rpx;
  line-height: 80rpx;
}

/* 平铺样式 */

.container-type2 {
  overflow: auto;
  height: 100%;
}

.classify-list-type2 {
  min-height: calc(100% - 100rpx);
}

.classify-item-type2 {
  margin-bottom: 10rpx;
  padding: 10rpx;
  background-color: #fff;
}

.classify-title-type2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 90rpx;
  font-size: 26rpx;
  color: #333;
}

.classify-title-line {
  width: 50rpx;
  height: 2rpx;
  background-color: #999;
}

.title-type2 {
  margin: 0 16rpx;
}

.subclass-list-type2 {
  display: flex;
  flex-wrap: wrap;
}

.subclass-item-type2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 25%;
  height: 180rpx;
}

.subclass-img-type2 {
  width: 126rpx;
  height: 126rpx;
  border-radius: 4rpx;
}

.subclass-name-type2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  text-align: center;
  color: #666;
  font-size: 24rpx;
  margin-top: 10rpx;
}

.type2-support {
  width: 100%;
  color: #666;
  text-align: center;
}

/* 商品模式 */

.goods-list {
  display: flex;
  flex-wrap: wrap;
}

.goods-item {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 6rpx;
  width: 250rpx;
  font-size: 24rpx;
  background: #fff;
  border: 2rpx #eee solid;
  border-radius: 4rpx;
}

.goods-img {
  width: 230rpx;
  height: 230rpx;
  margin: 10rpx;
  border-radius: 4rpx;
}

.empty {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10rpx;
  width: 230rpx;
  height: 230rpx;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 4rpx;
}

.empty-img {
  width: 150rpx;
  height: 150rpx;
}

.goods-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  height: 72rpx;
  line-height: 36rpx;
  padding: 0 20rpx;
}

.goods-oldPrice {
  /* margin-top: 10rpx; */
  padding: 0 16rpx;
  line-height: 24rpx;
  color: #666;
  font-size: 20rpx;
  text-decoration: line-through;
}

.goods-price {
  margin-top: 4rpx;
  padding: 0 20rpx;
  line-height: 30rpx;
  font-size: 30rpx;
}

.goods-salecount {
  margin: 6rpx 0;
  padding: 0 20rpx;
  font-size: 20rpx;
}

.type3-support {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100rpx;
  color: #333;
}

.type3-support-icon {
  position: relative;
  /* top: 6rpx; */
  font-size: 60rpx !important;
}

/* 商品列表，横向 */

.goods-list-2 {
  display: flex;
  flex-wrap: wrap;
}

.goods-item-2 {
  position: relative;
  padding: 30rpx 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 24rpx;
  background: #fff;
  border-bottom: 2rpx #f4f4f4 solid;
}

.goods-img-2 {
  flex-shrink: 0;
  width: 164rpx;
  height: 164rpx;
  border-radius: 4rpx;
}

.empty-2 {
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 164rpx;
  height: 164rpx;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 4rpx;
}

.empty-img-2 {
  width: 100rpx;
  height: 100rpx;
}

.goods-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 330rpx;
  height: 180rpx;
}

.goods-name-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  height: 42rpx;
  line-height: 42rpx;
  font-size: 30rpx;
}

.tag {
  padding: 0 4rpx;
  border-radius: 6rpx;
  font-size: 22rpx;
}

.info-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 50rpx;
}

.price-item {
  display: flex;
  align-items: baseline;
}

.goods-price-2 {
  margin-top: 4rpx;
  padding-right: 6rpx;
  line-height: 28rpx;
  font-size: 28rpx;
  font-family: Arial;
}

.pointText {
  font-size: 20rpx;
  font-weight: 500;
}

.goods-oldPrice-2 {
  line-height: 24rpx;
  color: #666;
  font-size: 20rpx;
  text-decoration: line-through;
}

.info-bottom .icon-addition_fill {
  line-height: 50rpx;
  font-size: 50rpx;
}

/* 规格信息弹出框 */

.shadow-bg {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: rgba(12, 12, 12, 0.5);
  z-index: 100;
}

.spec-info {
  position: relative;
  width: 100%;
  height: 950rpx;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 50rpx 50rpx 0 0;
}

.spec-header {
  display: flex;
  justify-content: center;
  height: 54rpx;
  width: 100%;
  padding-top: 30rpx;
}

.spec-line {
  width: 56rpx;
  height: 8rpx;
  background: #d8d8d8;
  border-radius: 7rpx;
}

scroll-view::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

.spec-title {
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  height: 100rpx;
  font-size: 26rpx;
}

.spec-goods {
  display: flex;
  margin-bottom: 40rpx;
  padding: 0 34rpx;
}

.spec-goods-img {
  width: 196rpx;
  height: 196rpx;
  border-radius: 4rpx;
}

.spec-goods-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 30rpx;
  width: 486rpx;
  line-height: 50rpx;
  font-size: 26rpx;
}

.spec-goods-price {
  font-size: 32rpx;
}

.spec-vip-price {
  width: 200rpx;
  line-height: 40rpx;
  color: yellow;
  font-size: 24rpx;
  text-align: center;
  background: #444;
  border-radius: 20rpx;
}

.sepc-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 36rpx;
}

.spec-content-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #03081a;
  line-height: 40rpx;
}

.spec-box {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20rpx;
}

.check-content {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10rpx;
  padding: 32rpx 0 20rpx;
}

.checkbox {
  margin-bottom: 40rpx;
  margin-right: 50rpx;
  padding: 8rpx 32rpx;
  text-align: center;
  font-size: 28rpx;
  color: #555;
  background-color: #eee;
  border-radius: 28rpx;
}

.checked {
  color: #fff !important;
}

.checkbox checkbox {
  display: none;
}

.select-num {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 36rpx 50rpx;
  height: 110rpx;
  font-size: 28rpx;
}

.num-stepper {
  display: flex;
  align-items: center;
}

.num-stepper .iconfont {
  height: 50rpx;
  font-size: 50rpx;
}

.decodeadd {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44rpx;
  height: 44rpx;
  vertical-align: middle;
  border: 2rpx solid #e5e5e5;
  font-size: 40rpx;
  line-height: 40rpx;
  border-radius: 2rpx;
}

.num-text {
  width: 64rpx;
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
  border-top: 1px solid #e5e5e5;
  height: 44rpx;
  line-height: 40rpx;
  box-sizing: border-box;
}

.btns {
  position: fixed;
  left: 16rpx;
  bottom: 10rpx;
  display: flex;
  align-items: center;
  width: 718rpx;
  height: 80rpx;
  z-index: 102;
}

.btns button {
  width: 500rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 32rpx;
  border: none;
  border-radius: 44rpx;
}

.slideUp {
  animation: slideUp 0.15s 1 linear alternate;
}

@keyframes slideUp {
  from {
    bottom: -870rpx;
  }

  to {
    bottom: 0;
  }
}

.van-skeleton__row {
  margin: 0 auto;
}

.classifyname-view .van-skeleton__avatar {
  height: 190rpx !important;
  width: 460rpx !important;
}

.subclass-item .van-skeleton__avatar {
  margin-right: 0 !important;
}

.van-skeleton__avatar {
  margin: 0 auto;
  margin-bottom: 10px;
}

.subclass-item .van-skeleton__title {
  margin-left: -60rpx;
}

.van-skeleton__avatar + .van-skeleton__content {
  width: 0;
}

.container-type4 .van-skeleton {
  padding: 0;
}

.container-type4 .van-skeleton__row {
  margin: 0;
}

.subclass-list-type2 .van-skeleton__avatar {
  margin-right: 0;
}

.list-view {
  height: 100vh;
  /* padding-bottom: 20rpx; */
  padding-bottom: 80rpx;
  position: relative;
  overflow: hidden;
  margin-top: 10rpx;
}

.head-sort {
  background-color: white;
  height: 80rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #888;
}

.sort-condition-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sort-condition-item {
  flex: 1;
  text-align: center;
}

.sort-order {
  display: flex;
  flex-direction: column;
  margin-left: 10rpx;
}

.up-icon {
  font-size: 28rpx;
  height: 10rpx;
  line-height: 10rpx;
}

.up-down {
  font-size: 28rpx;
  height: 10rpx;
  line-height: 15rpx;
}
</style>
